<template>
  <div>
    <sn-text
        class="margin-bottom"
        font-weight="bold"
        text="影院列表"
        slot="one-col"
        :font-size="25"/>
    <cinema-list-template
        :cinema="item"
        v-for="item in dataList"/>
    <!--影院分页-->
    <el-pagination
        class="page"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="Number(searchParams.pageNum)"
        :page-sizes="[8, 16, 24, 30]"
        :page-size="Number(searchParams.size)"
        :total="Number(totalNumbers)"
        layout="total, sizes, prev, pager, next, jumper"/>
  </div>
</template>

<script>
import CinemaListTemplate from "@/views/cinema/cinema_list/template/CinemaListTemplate"

export default {
  name: "Cinema",
  data() {
    return {
      //影院总数
      totalNumbers: 0,
      //影院数据
      dataList: [],
      searchParams: {
        /**
         * 根据电影名称进行全文检索
         */
        cinemaName: '',
        /**
         * 根据品牌名称过滤
         */
        brandName: '',
        /**
         * 根据行政区过滤
         */
        areaName: '',
        /**
         * 根据影厅类型名称过滤
         */
        movieHallTypeName: '',
        /**
         * 服务类型名称
         */
        servieName: '',
        /**
         * 页数
         */
        pageNum: 1,
        /**
         * 每页条数
         */
        size: 8,
      }
    }
  },
  components: {
    CinemaListTemplate
  },
  created() {
    this.getDataList()
  },
  methods: {
    getDataList() {
      this.$http({
        url: '/es/cinema/index',
        method: 'get',
        params: this.$http.adornParams(this.searchParams)
      }).then(({data}) => {
        this.dataList = data.data
        this.totalNumbers = data.data[0].totalItems
      })
    },
    // 每页条数变化
    sizeChangeHandle(val) {
      this.searchParams.size = val
      this.searchParams.pageNum = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.searchParams.pageNum = val
      this.getDataList()
    },
  },
}
</script>

<style scoped>
.page {
  margin-top: 20px;
  margin-bottom: 40px;
  text-align: center;
}
</style>